<template>
  <div class="container">
    <topTitle
      :titleText="info.title"
      :titleExplain="info.explain"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row class="section1">
        <div>
          <i class="iconfont iconshenqingtiaojian"></i>
          <span class="tip">申请条件</span>
        </div>
        <ul>
          <li v-for="(item, index) of info.condition" :key="index">
            {{ item.item }}
          </li>
        </ul>
      </el-row>
      <el-row class="section2">
        <div>
          <i class="iconfont icongongnengjieshao"></i>
          <span class="tip">功能介绍</span>
        </div>
        <ul>
          <li v-for="(item, index) of info.introduction" :key="index">
            {{ item.item }}
          </li>
        </ul>
      </el-row>
      <el-row class="section2">
        <div>
          <i class="iconfont iconshengming"></i>
          <span class="tip">声明</span>
        </div>
        <ul>
          <li v-for="(item, index) of info.statement" :key="index">
            {{ item.item }}
          </li>
        </ul>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'applicationIntroduction',

  data() {
    return {
      back: true,
      code: '',
      info: {
        title: '',
        explain: '',
        condition: [],
        introduction: [],
        statement: [],
      },
      employeeInfo: {
        title: '花名册',
        explain: '身份真伪校验，自动生成进退场名单',
        condition: [{ item: '花名册属于建筑端基础应用，跟随项目管理开启' }],
        introduction: [
          { item: '支持身份证阅读器、APP扫描身份证录入两种方式，可自由选择；' },
          { item: '连接公安身份验证数据库，及时判断短身份真伪；' },
          { item: '工人信息轻松备案存档，包括身份证件、银行卡号、合同协议；' },
          {
            item: '自动生成工程项目进退场名单，企业、劳动监察和行业主管可以实时查阅工程项目建筑工人进退场情况；',
          },
        ],
        statement: [
          {
            item: '花名册功能启用后，将在全地区开启使用，暂不可关闭，请您慎重启用',
          },
        ],
      },
      attanceInfo: {
        title: '考勤',
        explain: '支持闸机考勤和移动app考勤两种方式',
        condition: [{ item: '考勤属于建筑端基础应用，跟随项目管理开启' }],
        introduction: [
          { item: '支持房建、路桥等多种应用场景，适配各种预算情况；' },
          {
            item: '电子考勤记录可由分包、班组长校对上报；可生成考勤报表，下载导出；',
          },
          { item: '考勤记录向监管部门报备，考勤异常预警；' },
        ],
        statement: [
          {
            item: '考勤功能启用后，将在全部区开启使用，暂不可关闭，请您慎重启用',
          },
        ],
      },
      accountInfo: {
        title: '工资专户',
        explain: '分账管理，专款专用，保障农民工工资发放',
        condition: [{ item: '工资专户属于建筑端基础应用，跟随项目管理开启' }],
        introduction: [
          {
            item: '对签约账户实施出款控制，专款专用，保障监管资金安全; 支持子账簿本行/跨行多渠道直接入账；',
          },
          { item: '工资专户资金预警，工资专户资金情况分析；' },
          {
            item: '及时向监管部门推送专户开设信息、账户余额、账户缴存、账户工资代发支出；',
          },
        ],
        statement: [
          {
            item: '工资专户功能启用后，将在全地区开启使用，暂不可关闭，请您慎重启用',
          },
        ],
      },
      salaryInfo: {
        title: '工资代发',
        explain: '在线制作工资台账，支持多种工资代发方式',
        condition: [{ item: '工资代发属于建筑端基础应用，跟随项目管理开启' }],
        introduction: [
          {
            item: '支持在线制作工资台账，及多种在线代发方式，办公室内即可完成工资发放；',
          },
          { item: '持劳务公司、班组长制作并上报工资台账，分工合作；' },
          {
            item: '工人可在移动端app上确认工资，如有异议可及时提出，避免工资纠纷；',
          },
          {
            item: '多维度工资发放报表分析，工资发放情况报备监管部门；工资发放异常情况及时预警；',
          },
        ],
        statement: [
          {
            item: '工资代发功能启用后，将在全地区开启使用，暂不可关闭，请您慎重启用',
          },
        ],
      },
      securityInfo: {
        title: '保证金管理',
        explain: '地区工程项目保证金台账管理',
        condition: [{ item: '地区工程项目保证金台账管理' }],
        introduction: [
          { item: '监管单位根据政策文件设置工资保证金缴纳比例及缴纳银行；' },
          { item: '各区劳动保障监察部门录入辖区内保证金缴纳流水数据；' },
          {
            item: '根据区域统计辖区内保证金缴纳、动用、补缴及返还情况，区分资金存入及担保类型缴纳数据；',
          },
        ],
        statement: [
          {
            item: '保证金管理功能启用后，将在全地区开启使用，暂不可关闭，请您慎重启用；',
          },
        ],
      },
      otherInfo: {
        title: '其他应用',
        explain: '项目建档、项目管理、项目预警、投诉举报',
        condition: [
          {
            item: '属项目建档、项目管理、项目预警、投诉举报于建筑端基础应用，同步开启',
          },
        ],
        introduction: [
          {
            item: '企业申报项目由监管方审核，通过后即可进行项目管理；监管单位建档项目，督促企业完善并管理项目；',
          },
          {
            item: '根据制度要求实时动态监管项目违规违法行为，提前预防及制止企业用工风险；',
          },
          {
            item: '务工人员线上提交违法纠纷信息，劳动监察知晓最新项目纠纷事件，对存在纠纷项目予以重点关注；',
          },
        ],
        statement: [
          { item: '功能启用后，将在全地区开启使用，暂不可关闭，请您慎重启用' },
        ],
      },
    }
  },
  created() {
    this.code = this.$route.query.code
    if (this.code === 'employee') {
      this.info = this.employeeInfo
    }
    if (this.code === 'attance') {
      this.info = this.attanceInfo
    }
    if (this.code === 'account') {
      this.info = this.accountInfo
    }
    if (this.code === 'salary') {
      this.info = this.salaryInfo
    }
    if (this.code === 'securityDeposit') {
      this.info = this.securityInfo
    }
    if (this.code === 'other') {
      this.info = this.otherInfo
    }
  },
  methods: {
    goBack() {
      this.$router.push('/home/functionMarket/applicationMenu')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/functionMarket/applicationMenu',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.greenColor {
  color: #009588;
}
.container {
  .mainCon {
    top: 213px;
    padding: 40px 24px;
    font-size: 14px;
    color: #666;
    line-height: 20px;
    .tip {
      color: #333;
      font-size: 16px;
      margin-left: 5px;
    }
    .iconfont {
      font-size: 19px;
    }
    .iconshenqingtiaojian {
      color: #37ad44;
    }
    .icongongnengjieshao {
      color: #4a99eb;
    }
    .iconshengming {
      color: #e02020;
    }
    ul {
      margin-top: 13px;
      margin-bottom: 50px;
      li {
        position: relative;
        margin-bottom: 15px;
        padding-left: 45px;
      }
      li::before {
        content: ' ';
        position: absolute;
        width: 8px;
        height: 8px;
        background-color: #d8d8d8;
        border-radius: 4px;
        left: 29px;
        top: 7px;
      }
    }
  }
}
</style>
